<html>
    <head>
        <title>Itowns - Globe + geoson to 3d</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="css/example.css">
        <link rel="stylesheet" type="text/css" href="css/loading_screen.css">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="js/GUI/dat.gui/dat.gui.min.js"></script>
    </head>
    <body>
        <div id="viewerDiv" class="viewer">
            <span id="tooltipDiv" class="tooltip"></span>
        </div>
        <script src="js/GUI/GuiTools.js"></script>
        <script src="../dist/itowns.js"></script>
        <script src="../dist/debug.js"></script>
        <script type="text/javascript">
            /* global itowns,document,GuiTools, window, debug */
            var ariege;
            var menuGlobe;

            // Define initial camera position
            var positionOnGlobe = { longitude: 1.5, latitude: 43, altitude: 300000 };

            // `viewerDiv` will contain iTowns' rendering area (`<canvas>`)
            var viewerDiv = document.getElementById('viewerDiv');

            // Instanciate iTowns GlobeView*
            var view = new itowns.GlobeView(viewerDiv, positionOnGlobe);


            // Add one imagery layer to the scene
            // This layer is defined in a json file but it could be defined as a plain js
            // object. See Layer* for more info.
            itowns.Fetcher.json('./layers/JSONLayers/Ortho.json').then(function _(config) {
                config.source = new itowns.WMTSSource(config.source);
                var layer = new itowns.ColorLayer('Ortho', config);
                view.addLayer(layer).then(menuGlobe.addLayerGUI.bind(menuGlobe));
            });

            // Add two elevation layers.
            // These will deform iTowns globe geometry to represent terrain elevation.
            function addElevationLayerFromConfig(config) {
                config.source = new itowns.WMTSSource(config.source);
                var layer = new itowns.ElevationLayer(config.id, config);
                view.addLayer(layer).then(menuGlobe.addLayerGUI.bind(menuGlobe));
            }
            itowns.Fetcher.json('./layers/JSONLayers/WORLD_DTM.json').then(addElevationLayerFromConfig);
            itowns.Fetcher.json('./layers/JSONLayers/IGN_MNT_HIGHRES.json').then(addElevationLayerFromConfig);

            function extrude() {
                return 5000;
            }

            function color() {
                return new itowns.THREE.Color(0xffcc00);
            }

            ariege = new itowns.GeometryLayer('ariege', new itowns.THREE.Group());
            ariege.update = itowns.FeatureProcessing.update;
            ariege.convert = itowns.Feature2Mesh.convert({
                color: color,
                extrude: extrude });

            ariege.source = new itowns.FileSource({
                url: 'https://raw.githubusercontent.com/gregoiredavid/france-geojson/master/departements/09-ariege/departement-09-ariege.geojson',
                projection: 'EPSG:4326',
                format: 'application/json',
                zoom: { min: 7, max: 7 },
            });

            view.addLayer(ariege).then(function menue(layer) {
                var gui = debug.GeometryDebug
                    .createGeometryDebugUI(menuGlobe.gui, view, layer);
                debug.GeometryDebug.addWireFrameCheckbox(gui, view, layer);
            });

            menuGlobe = new GuiTools('menuDiv', view);
</script>
</body>
</html>



